{extend name="admin:base_admin"}
{block name="content"}
<!--选择文件:<input multiple type="file" id="file1" /><br />
<input type="button" id="upload" value="上传" />
<img src="wait.gif" style="display:none" id="imgWait" />
<hr>-->

<div class="file">
    <div>
        <a href="javascript:;">多图片
            <input type="file" multiple class="img-input" accept="image/gif,image/jpeg,image/png">
            <input type="hidden" class="img-hidden" name="abb">
        </a>
    </div>
</div>

<input type="file" multiple name="detail" class="upload-file">
<script>
    /**
     * 上传文件
     */
    $(function () {
        function uploadFile(fileInput,url,successFunc,errorFunc) {
            var formData = new FormData();
            $(fileInput.files).each(function (index,val) {
                formData.append('file' + index,val);
            });
            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: successFunc,
                error: errorFunc
            })
        }
        $('.file .img-input').on("change",function () {
            var url = "{:url('admin/Core/uploadImg')}";
            var input = this;
            uploadFile(this,url,function (data) {
                $(data.ids).each(function (index,val) {
                    var img = '<div class="upload-img alert" style="display: inline-block">\
                            <button type="button" img-value="'+val.id+'" class="img-close close" data-dismiss="alert" aria-label="Close">\
                            <span aria-hidden="true">&times;</span>\
                    </button>\
                    <img  class="img-thumbnail" src="'+val.url+'">\
                    </div>';
                    $(input).parents('.file').append(img);
                    var hidden = $(input).parents('.file').find('.img-hidden');
                    var value = hidden.attr('value');
                    if(value) {
                        var valueArr = value.split(',');
                        valueArr[valueArr.length] = val.id;
                        value = valueArr.join(',');
                        hidden.attr('value',value);
                    }else {
                        hidden.attr('value',val.id);
                    }

                    $('.img-close').on('click',function () {
                        $imgValue = $(this).attr("img-value");
                        var value = hidden.attr('value');
                        var valueArr = value.split(',');
                        var newValueArr = [];
                        for(var key in valueArr) {
                            if(valueArr[key] != $imgValue) {
                                newValueArr.push(valueArr[key]);
                            }
                        }
                        value = newValueArr.join(',');
                        hidden.attr('value',value);
                    });
                })
            },function (data) {

            });
        });

        $('.upload-file-input').on('change',function () {
            var url = "{:url('admin/Core/uploadFile')}";
            uploadFile(this,url,function (data) {

            },function (data) {

            });
        })
    });
</script>
{/block}